<template>
  <div class="app">
    <div class="title">
      <el-card class="box-card">
        <h3>商铺信息</h3>
        <div style="margin: 20px"></div>
        <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="ruleForm">
          <!-- 标题 -->
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <!-- 商铺logo -->
          <el-form-item label="商铺logo">
            <el-upload class="avatar-uploader" action="http://192.168.1.84:8081/upload/admin" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <!-- 描述 -->
          <el-form-item label="描述" prop="description">
            <el-input v-model="ruleForm.description"></el-input>
          </el-form-item>
          <!-- 地址 -->
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 保存&更改 -->
      <button type="button" class="el-button el-button--primary" @click="submitForm('ruleForm')">
        <span>保存更改</span>
      </button>
    </div>
  </div>
</template>
<script>
import { addlist,updatelist } from "../encapsulation/StoreInformation";
export default {
  data() {
    //表单内容
    return {
      imageUrl: "", //照片上传
      ruleForm: {
        title: "", //商铺名字
        description: "", //商铺描述
        address: "", //商铺地址
      },
      //表单验证
      rules: {
        title: [
          {
            required: true,
            message: "商铺标题不能为空",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "商铺描述不能为空",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "商铺地址不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //   列表渲染
    getlist() {
      addlist().then((res) => {
        this.ruleForm.title = res.data.data.title;
        this.ruleForm.description = res.data.data.description;
        this.ruleForm.address = res.data.data.address;
        this.imageUrl = res.data.data.logoUrl;
      });
    },
    // 表单非空验证
    submitForm(ruleForm) {
        let _this = this
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let data = {
              title:this.ruleForm.title,
              description:this.ruleForm.description,
              address:this.ruleForm.address,
              logoUrl:this.imageUrl,
              showType:0
            };
            updatelist(data).then((res) => {
              if (res.data.errmsg === "成功") {
                (_this.dialogFormVisible = false);
                _this.$message.success({
                  message: "更改成功",
                });
                _this.getlist();
              }
              _this.$refs[ruleForm].resetFields();
            });
        } else {
            this.$message.error({
                message:"请完善信息",
            })
          return false;
        }
      });
    },
    // 照片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped lang="less">
.app {
  height: 100%;
  overflow: hidden !important;
  position: relative;
}
.title {
  padding: 20px;
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.box-card {
  width: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
.el-button {
  margin: 20px;
}
</style>
